initial, inherit, unset and revert in CSS

November 18, 2021 · 6 min read

关于 initial、inherit、unset、revert 的作用及其使用场景

前言

对于 initial、inherit、unset、revert，它们都是 css 属性的取值。

关于属性默认值(初始值)

任何 css 属性都具有一个默认值。

对于元素所有没有设置的属性来说，取值都是默认值(初始值)，比如 bg-color 的默认值就是 transparent，默认值和元素类型无关。

浏览器默认样式表(user agent stylesheet)

对于一些特殊的标签，比如 ul、li、b 这些标签，就算我们没有给他们设置样式，它们也会具有一个默认的样式表，这是由浏览器决定的，请区分「默认样式表」和「属性默认值」，因为默认样式表中的属性取值并不一定是默认值。浏览器默认样式表和元素类型有关。

比如 b 标签，作用是加粗内部字体，该元素 font-weight 的取值就来源于浏览器默认样式表。

详细介绍

initial

任何 css 属性都可以设置该值，表示给该 css 属性取默认值。

常见的用法如下：

/* 只给容器 div 的字体颜色设置为 red，其后代的所有字体颜色为默认值 */
div {
  color: red;
  & * {
    color: initial;
  }
}   

inherit

CSS 属性有两种类型：

可继承的属性 —— 当前 HTML 元素的 CSS 属性会影响它的后代元素。所有文本类型的 CSS 属性都有这个继承行为。比如：如果你给某个 HTML 元素设置了 font-size 属性，那么该元素的所有后代元素都会继承这个 font-size，除非你给某个后代元素又重新设置了 font-size。
不可继承的属性 —— 当前 HTML 元素的 CSS 属性只对自身有效。除了文本类型之外的其它 CSS 属性都是不可继承的。比如：给某个 HTML 元素设置一个 border CSS 属性，该元素的后代元素不会同步的获得这个属性。

有关 css 属性的继承性，分为两类：

css 属性的取值默认继承父元素
css 属性的取值默认不会继承父元素

一定要注意「默认」这两字，意思是如果父元素存在下列 css 属性，那么其所有后代元素都会默认继承它的取值，尽管后代元素没有设置这些属性。

很有代表性的例子就是 color 这个属性，父元素设置了 color 字体颜色，那么其后代所有元素中的字体都会和父元素一致。

属性取值继承性	属性
所有元素可继承	visibility、cursor
内联元素可继承	letter-spacing、word-spacing、white-space、ine-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块级元素可继承	text-indent、text-align
列表元素可继承	list-style、list-style-type、list-style-position、list-style-image
表格元素可继承	border-collapse

对于那些默认不继承父元素属性取值的属性，我们可以在子元素中对其取 inherit 来让它继承父元素取值

div {
  width: 100px;
  height: 100px;
  border: black 1px solid;

  content {
    width: 50px;
    height: 50px;
    border: inherit; // 继承来自父元素的 border 取值
  }
}

属性取值继承的顺序：

子元素 + 浏览器默认样式表 -> 父元素 -> 祖先元素 -> 根元素 -> initial（CSS初始值）

解释一下就是，上层的样式来源很可能就被下层样式来源给覆盖了，如果没有覆盖掉，那么就会继承上层的，比如，子元素(当前元素) 的 font-size 可能来自浏览器默认样式表，如果默认样式表中没有设置 font-size，那么就可能继承自父元素，如果父元素也没有设置 font-size，那么就可能继承根元素，如果根元素也没有设置，那么就取值为 initial，即初始值。

这个例子可以通过 h1 元素来测试，h1 元素具有默认样式表，其中 font-size: 2em，如果我们不给 h1 元素自身设置 font-size 的话，那么 h1 元素的 font-size 取值应该为 2em。

pic.sm

unset

对于「继承属性」，取值为 unset 时，等价于 inherit
对于「非继承属性」，取值为 unset 时，等价于 initial

unset 一般搭配 all 属性来使用：

/* bad */
.content {
  font-size: inherit;
  font-weight: inherit;
  border: initial;
  background-color: initial;
}

/* good */
.content {
  all: unset;
}

revert

revert 的作用和 unset 相似，不同的是，revert 会将样式重制为浏览器默认样式表中的取值，而不是初始值。

CodePen Demo -- Difference between revert and unset keyword in CSS

前言​

关于属性默认值(初始值)​

浏览器默认样式表(user agent stylesheet)​

详细介绍​

initial​

inherit​

unset​

revert​

Reference​

前言